<template>
	<view class="vote-detail-container">
		<view class="vote-detail-hd">
			<view class="title-box">
				<view class="title">年会是否需要保留喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化</view>
			</view>
			<view class="footer-icon">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
			<view class="footer-icon2">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
		</view>
		<view class="vote-detail-bd">
			<view class="box">
				<view class="line1">
					<view class="item">
						<view class="top">26</view>
						<view class="bottom">已投票人数</view>
					</view>
					<view class="item">
						<view class="top">95</view>
						<view class="bottom">已投权数</view>
					</view>
					<view class="item">
						<view class="top">4</view>
						<view class="bottom">回避人数</view>
					</view>
				</view>
				<view class="line2">
					<view class="item">
						<view class="top">30</view>
						<view class="bottom">投票总人数</view>
					</view>
					<view class="item">
						<view class="top">200</view>
						<view class="bottom">总权数</view>
					</view>
					<view class="item">
						<view class="top">100</view>
						<view class="bottom">回避权数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="vote-detail-rs">
			<view class="title">投票结果</view>
			<view class="rs-item rs1">1.同意票数：50（占比50%）</view>
			<view class="rs-item rs2">2.反对票数：45（占比45%）</view>
			<view class="rs-item rs3">3.放弃票数：5（占比5%）</view>
			<view class="footer-icon">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
			<view class="footer-icon2">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
		</view>
		<view class="vote-detail-rs2">
			<view class="rs-item rs1">
				<view class="left">同   意</view>
				<view class="center">
					<u-line-progress active-color="#EC6040" inactive-color="#E9CEC8" :percent="50" :show-percent="false"></u-line-progress>
				</view>
				<view class="right">50%</view>
			</view>
			<view class="rs-item rs2">
				<view class="left">不同意</view>
				<view class="center">
					<u-line-progress active-color="#EC6040" inactive-color="#E9CEC8" :percent="45" :show-percent="false"></u-line-progress>
				</view>
				<view class="right">45%</view>
			</view>
			<view class="rs-item rs3">
				<view class="left">放   弃</view>
				<view class="center">
					<u-line-progress active-color="#EC6040" inactive-color="#E9CEC8" :percent="5" :show-percent="false"></u-line-progress>
				</view>
				<view class="right">5%</view>
			</view>
		</view>
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>
<script>
	import {
		getVoteResult
	} from '../../common/service.js'
	
	export default {
		data() {
			return {
				voteObj: {},
				id: '', // 议题记录id
			}
		},
		onLoad(option) {
			const that = this;
			console.log('detail页面-option：');
			console.log(option);
			if (option.id) {
				console.log(option.id);
				that.getResult(option.id);
			} else {
				const id = that.getQueryString('id');
				console.log('获取地址栏中的id:' + id);
				if (id) {
					that.getResult(id);
				}
			}
		},
		methods: {
			getQueryString(name) {
				const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				const r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			getResult(id) {
				getVoteResult(id, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('投票详情:');
						console.log(rs);
						if (rs.code == 200) {
							console.log(rs.data);
						}
					}
				}, function(e) {
					console.log('获取投票详情失败:');
					console.log(e);
				});
			},
		}
	}
</script>
<style>
	page{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background: #0A1B87;
	}
	.vote-detail-container {
		width: 100%;
		padding: 0;
		margin: 0;
		background: #0A1B87;
		padding-top: 29rpx;
		padding-bottom: 126rpx;
	}
	.vote-detail-hd{
		width: 710rpx;
		height: 248rpx;
		background: url(../../static/vote/head-bg2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		position: relative;
		margin-left: 20rpx;
	}
	.vote-detail-hd .title-box{
		width: 667rpx;
		height: 154rpx;
		display:flex;
		align-items:center;
		justify-content: center;
		padding: 20rpx 58rpx 16rpx 68rpx;
		overflow: hidden;
		border-radius: 26rpx;
		position: absolute;
		top: 20rpx;
		left: 22rpx;
	}
	.vote-detail-hd .title-box .title{
		line-height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #14378F;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.vote-detail-hd .footer-icon, .vote-detail-hd .footer-icon2{
		width: 45rpx;
		height: 105rpx;
		position: absolute;
		top: 210rpx;
	}
	.vote-detail-hd .footer-icon{
		left: 58rpx;
	}
	.vote-detail-hd .footer-icon2{
		right: 62rpx;
	}
	.vote-detail-hd .footer-icon image, .vote-detail-hd .footer-icon2 image{
		width: 100%;
		height: 100%;
	}
	.vote-detail-bd{
		width: 690rpx;
		/* height: 416rpx; */
		min-height: 133rpx;
		background-color: #094EC6;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-top: 19rpx;
		padding-bottom: 14rpx;
	}
	.vote-detail-bd .box{
		width: 100%;
		/* height: 396rpx; */
		min-height: 111rpx;
		background: #1D62D8;
		border-radius: 10rpx;
		padding-top: 56rpx;
		padding-bottom: 33rpx;
	}
	.vote-detail-bd .box .line1{
		width: 100%;
		height: 125rpx;
		display: flex;
	}
	.vote-detail-bd .box .line2{
		width: 100%;
		height: 129rpx;
		margin-top: 53rpx;
		display: flex;
	}
	.vote-detail-bd .box .line1 .item, .vote-detail-bd .box .line2 .item{
		flex: 1;
	}
	.vote-detail-bd .box .line1 .item .top{
		width: 100%;
		height: 66rpx;
		text-align: center;
		line-height: 66rpx;
		font-size: 50rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FFFFFF;
	}
	.vote-detail-bd .box .line1 .item .bottom{
		width: 100%;
		height: 59rpx;
		text-align: center;
		line-height: 59rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.vote-detail-bd .box .line2 .item .top{
		width: 100%;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		font-size: 50rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FFFFFF;
	}
	.vote-detail-bd .box .line2 .item .bottom{
		width: 100%;
		height: 61rpx;
		text-align: center;
		line-height: 61rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.vote-detail-rs{
		width: 710rpx;
		/* height: 345rpx; */
		background: #FAEFD0;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 54rpx;
		padding-top: 68rpx;
		padding-bottom: 68rpx;
		position: relative;
	}
	.vote-detail-rs .title{
		width: 213rpx;
		height: 64rpx;
		text-align: left;
		text-indent: 36rpx;
		line-height: 64rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background: url(../../static/vote/flag.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 4rpx 32rpx 32rpx 4rpx;
		position: absolute;
		top: -27rpx;
		left: -10rpx;
	}
	.vote-detail-rs .rs-item{
		width: 100%;
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0A1B87;
		text-indent: 52rpx;
	}
	.vote-detail-rs .rs2{
		margin-top: 23rpx;
	}
	.vote-detail-rs .rs3{
		margin-top: 24rpx;
	}
	.vote-detail-rs .footer-icon, .vote-detail-rs .footer-icon2{
		width: 45rpx;
		height: 105rpx;
		position: absolute;
		bottom: -66rpx;
	}
	.vote-detail-rs .footer-icon{
		left: 49rpx;
	}
	.vote-detail-rs .footer-icon2{
		right: 54rpx;
	}
	.vote-detail-rs .footer-icon image, .vote-detail-rs .footer-icon2 image{
		width: 100%;
		height: 100%;
	}
	.vote-detail-rs2{
		width: 710rpx;
		height: 280rpx;
		background: #FAEFD0;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		padding-top: 68rpx;
	}
	.vote-detail-rs2 .rs-item{
		width: 100%;
		height: 30rpx;
		display: flex;
	}
	.vote-detail-rs2 .rs-item .left{
		width: 142rpx;
		height: 30rpx;
		text-align: left;
		line-height: 30rpx;
		text-indent: 35rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0A1B87;
	}
	.vote-detail-rs2 .rs-item .center{
		flex: 1;
	}
	.vote-detail-rs2 .rs-item .right{
		width: 118rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: left;
		text-indent: 39rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0A1B87;
	}
	.vote-detail-rs2 .rs2, .vote-detail-rs2 .rs3{
		margin-top: 35rpx;
	}
</style>
